<template>
  <section>
    <van-sticky>
      <PageHeader title="课程订单"/>
    </van-sticky>

    <div class="flex flex-row flex-left flex-centerV pd10 bg-color-white font-common" v-if="user">
      <img :src="user.avatar_url ? user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="avatar" />
      <span class="ml5">{{user.nick}}</span>
      <a :href="'tel:' + user.mobile" class="ml5 blue">TEL:{{user.mobile}}</a>
    </div>

    <div class="bg-color-white flex flex-row mt10" v-if="course">
      <div class="flex flex-row">
        <img :src="course.img_url" height="50" width="50" />
      </div>

      <div class="flex flex-row flex-1 flex-left flex-centerV pl10 font-common">
        {{course.name}}
      </div>
    </div>

    <div class="flex flex-col mt10 bg-color-white font-common" v-if="order">
      <div class="flex flex-row flex-left pd10">订单号：{{order.sn}}</div>
      <div class="flex flex-row flex-left pd10">订单金额：{{order.money}}元</div>
      <div class="flex flex-row flex-left pd10">实付金额：{{order.pay_money}}元</div>
      <div class="flex flex-row pd10">
        <div class="flex flex-row flex-left flex-1">订单状态：{{order.order_status_label}}</div>
        <div class="flex flex-row flex-left flex-1">付款状态：{{order.pay_status_label}}</div>
      </div>
      <div class="flex flex-row flex-left pd10">下单时间：{{order.dateline|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
      <div class="flex flex-row flex-left pd10" v-if="order.pay_time > 0">付款时间：{{order.pay_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
    </div>

    <div class="empty-box"></div>

    <div class="bg-color-white pd10 bottom-wrapper text-right" v-if="order">
      <van-button round
                  size="small"
                  plain
                  type="info"
                  class="mr10"
                  @click="cancel"
                  v-if="order.order_status == COURSE_ORDER_STATUS_CONFIRMED && order.pay_status==COURSE_ORDER_PAY_STATUS_UNPAIED">取消订单</van-button>
      <van-button round
                  size="small"
                  type="primary"
                  @click="showModifyMoneyPopup"
                  v-if="order.order_status == COURSE_ORDER_STATUS_CONFIRMED && order.pay_status==COURSE_ORDER_PAY_STATUS_UNPAIED">修改金额</van-button>
    </div>

    <van-popup closeable v-model="modifyOrderMoenyFormPopupVisible" class="pd10" style="width: 80%;">
      <van-form @submit="onModifyOrderMoneyFormSubmit">
        <van-field
          v-model="form.money"
          type="number"
          name="order_money"
          label="订单金额"
          placeholder="请输入订单金额"
          :rules="[{ required: true, message: '请输入订单金额' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </van-popup>

  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, Sticky, Button} from 'vant';
  import PageHeader from "../../componets/PageHeader";
  import {
    BASE_STATIC_URL,
    courseOrderDetailUri,
    courseOrderCancelUri,
    courseOrderModifyMoneyUri
  } from "../../../common/api";
  import {
    COURSE_ORDER_PAY_STATUS_PAIED,
    COURSE_ORDER_PAY_STATUS_UNPAIED,
    COURSE_ORDER_STATUS_CONFIRMED
  } from "../../../common/constants";
  Vue.use(Toast).use(Dialog).use(Sticky).use(Button);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        BASE_STATIC_URL: BASE_STATIC_URL,
        COURSE_ORDER_STATUS_CONFIRMED: COURSE_ORDER_STATUS_CONFIRMED,
        COURSE_ORDER_PAY_STATUS_UNPAIED: COURSE_ORDER_PAY_STATUS_UNPAIED,
        COURSE_ORDER_PAY_STATUS_PAIED: COURSE_ORDER_PAY_STATUS_PAIED,
        course: null,
        order: null,
        user: null,
        modifyOrderMoenyFormPopupVisible: false,
        form: {money: 0.00}
      }
    },
    methods: {
      getInfo() {
        const that = this;
        this.$http.get(courseOrderDetailUri + '?sn=' + this.$route.params.sn).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.course = data.course;
            that.order = data.order;
            that.user = data.user;
          }
        }, response => {
          // error callback
        })
      },
      cancel() {
        const that = this;
        Dialog.confirm({
          message: '确定要取消吗？',
        }).then(() => {
          const url = courseOrderCancelUri + '?sn=' + this.$route.params.sn;
          that.$http.get(url).then(response => {
            let {code, msg, data} = response.body
            if (code != 0) {
              Toast.fail(msg);
            } else {
              that.getInfo();
            }
          }, response => {
            // error callback
          })
        }).catch(() => {
          // on cancel
        });
      },
      showModifyMoneyPopup() {
        this.form.money = parseFloat(this.order.pay_money);
        this.modifyOrderMoenyFormPopupVisible = true;
      },
      onModifyOrderMoneyFormSubmit(values) {
        const that = this;
        const postData = {
          sn: this.order.sn,
          pay_money: this.form.money
        };
        that.$http.post(courseOrderModifyMoneyUri, postData, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            Toast.fail(msg)
          } else {
            Toast.success('修改成功');
            that.modifyOrderMoenyFormPopupVisible = false;
            that.getInfo();
          }
        }, response => {
          Toast.fail('发生错误')
        })
      },
    },
    mounted: function () {
      this.getInfo();
    }
  }
</script>

<style scoped>
  .empty-box {
    height: calc(50px + env(safe-area-inset-bottom));
  }

  .bottom-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .avatar {
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }
</style>
